import React, { Component } from 'react'
import MenuConfig from './../../config/menuConfig'
import './index.less'
import { Menu } from 'antd';
const { SubMenu } = Menu;

export default class Iindex extends Component {
    state = {
        // menuTreeNode:[]
    }
    componentDidMount(){
                        // 用menuTreeNode来接收  调用renderMenu()方法，把MenuConfig对象传进去
        const menuTreeNode = this.renderMenu(MenuConfig)
        // 使用setState()去把menuTreeNode对象保存进来
        this.setState({
            menuTreeNode
        })
    }
    // 菜单渲染
    renderMenu =(data)=>{

        return data.map((item)=>{
            // 如果有子节点
            if(item.children){
                return(
                    // 递归遍历
                    <SubMenu title={item.title} key={item.key}>
                        {this.renderMenu(item.children)}
                    </SubMenu>
                )
            }
        return <Menu.Item title={item.title} key={item.key}>{item.title}</Menu.Item>
        })
    }
    // 在react生命周期中，调用setState()之后，就会调用render()方法
    // 使用setState()去把menuTreeNode对象保存进来后，调用render()方法

    

    render() {
        return (
            <div>
               <div className='logo'>
                   <img src='/assets/logo-ant.svg' alt=''/>
                   <h1>Imooc MS</h1>
               </div>
                   <Menu theme='dark'>
                        {this.state.menuTreeNode}
                   </Menu>
               
            </div>
        )
    }
}
